<!-- 逻辑代码块-->
<script setup lang="ts">
import { ref } from 'vue'
const food = ref('炒鸡蛋')

const changeFood = () => {
  food.value += '炒饭'
}

const eatFood = (event: any, food: string) => {
  alert(food + '豪赤')
}
</script>

<!-- 结构块:-->
<template>
  <!-- v-on可以简写为@ -->
  <h2>内联语句，即直接在语句内部写逻辑</h2>
  <p v-on:click="food += '炒饭'">{{ food }}</p>

  <h2>处理函数，写在逻辑代码块，适合用于写一些复杂逻辑</h2>
  <p v-on:click="changeFood">{{ food }}</p>

  <h2>调用函数+传递参数</h2>
  <button v-on:click="eatFood('狗屎')">点击吃豪赤的</button>

  <h2>默认的事件参数</h2>
  <!-- 事件触发时，浏览器会默认传递一个时间参数给函数 -->
  <!-- 触发事件时，如果既要获取默认的时间参数，又要传递自定义参数，可以使用$event代替默认的参数 -->
  <button @click="eatFood($event, '企鹅')">测试事件</button>
</template>

<!-- 样式块-->
<style scoped></style>
